<template>
  <div class="home">
    <sy-top :indexUnit="indexUnit" @parentActive="parentActive" />
    <tree-main class="tree" />
    <amap />
    <transition name="fade" mode="out-in">
      <router-view ref="view"></router-view>
    </transition>
  </div>
</template>

<script>
import Amap from "components/content/amap/Amap.vue";
import SyTop from "./syPage/SyTop.vue";
import SyNc from "./syPage/SyNc.vue";
import SyNm from "./syPage/SyNm.vue";
import SyNy from "./syPage/SyNy.vue";
import TreeMain from "components/content/selectMain/TreeMain.vue";

export default {
  components: {
    Amap,
    SyTop,
    SyNc,
    SyNm,
    SyNy,
    TreeMain,
  },
  data() {
    return {
      active: 0,
      indexUnit: null,
      datas: {},
    };
  },
  mounted() {
    this.bus.$on("scene-click", (scenes) => {
      const { name, scene, id } = scenes;
      this.$refs.view.echarts();
    });
  },
  methods: {
    parentActive(main) {
      this.active = main.index;
      this.$router.push("/main/sy" + main.path);
    },
  },
  beforeDestroy() {
    this.bus.$off("scene-click");
  },
};
</script>
<style scoped lang="scss">
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  // transform: translateX(20px);
  opacity: 0;
}
/*页面切换动画*/
/*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/
.fade-enter-active {
    transition: opacity .5s;
}
/*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/
.fade-enter {
    opacity: 0;
}
/*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/
.fade-leave {
    opacity: 1;
}
/*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/
.fade-leave-active {
    opacity:0;
    transition: opacity .5s;
}

.home {
  width: 100%;
  height: 100%;
}
.tree {
  position: absolute;
  top: 5.3125rem;
  left: 50%;
  margin-left: -25rem;
  z-index: 111111;
  height: 25rem;
  overflow: auto;
}
</style>